<div class="think-box-shadow">
    <link href="__ROOT__/public/tools/buckup/css/jquery.circliful.css" rel="stylesheet" type="text/css" />
    <link href="__ROOT__/public/tools/buckup/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
    <script src="__ROOT__/public/tools/buckup/js/jquery.circliful.js"></script>

    <table class="layui-table margin-top-10" lay-skin="line">
        <tbody>
        <tr>
            <td class='text-center nowrap' colspan="3">
                请选择要恢复的数据
            </td>
        </tr>
        {foreach $backupDir AS $dir}
        <tr>
            <td class='text-center nowrap' width="5%">
                <label class="think-radio"><input type="radio" name="dir" value="{$dir.dir_name}" ignore title="{$dir.dir_name}" ></label>
            </td>
            <td class='text-left nowrap'>
                {$dir.create_date} 备份
            </td>
            <td class='text-right nowrap'>
                <a class="layui-btn layui-btn-sm layui-btn-danger" data-confirm="确定要删除吗?" data-action="{:url('remove')}" data-value="dir#{$dir.dir_name}">删除</a>
            </td>
        </tr>
        {/foreach}
        </tbody>
    </table>
    <table class="layui-table margin-top-10" lay-skin="line">
        <tbody>
        <tr>
            <td class='text-center nowrap'>
                <input  class="layui-btn" type="button" value="开始恢复" id="startButton" onclick="recovey({})" />
                <button class="layui-btn layui-btn-danger margin-left-40" id="cancelButton" type='button' data-close>关闭</button>
            </td>
        </tr>
        <tr>
            <center>

                <div id="tongji">

                    <div id="myStat2" data-dimension="250" data-text="0%" data-info="等待恢复" data-width="30" data-fontsize="38" data-percent="0" data-fgcolor="#61a9dc" data-bgcolor="#eee"></div>
                </div>
            </center>
        </tr>
        </tbody>
    </table>
    <script>
        $(document).ready(function () {
            $('#myStat2').circliful();
        });

        function recovey(predate)
        {
            $("#startButton").val("恢复中");
            $("#startButton").attr("disabled", true);
            $("#cancelButton").hide();
            var db_dir = $("input[name='dir']:checked").val();

            $.ajax({
                url: '/data/database.Management/recovery',
                type: 'POST', //GET
                async: true, //或false,是否异步
                data: {predate: predate, dir: db_dir},
                dataType: 'json',
                success: function (data, textStatus, jqXHR) {

                    if (data.totalpercentage < 100)
                    {
                        datainfo = '正在恢复，请不要关闭窗口...';
                    } else
                    {
                        datainfo = '恢复完成';
                        $("#startButton").val(datainfo);
                        $("#cancelButton").show();
                    }

                    html = '<div id="myStat2" data-dimension="250" data-text="' + data.totalpercentage + '%" data-info="' + datainfo + '" data-width="30" data-fontsize="38" data-percent="' + data.totalpercentage + '" data-fgcolor="#61a9dc" data-bgcolor="#eee"></div>';
                    $('#tongji').html(html);
                    $('#myStat2').circliful();
                    if (data.totalpercentage < 100)
                    {
                        recovey(data);
                    }
                }
            })
        }
    </script>
</div>
